<template>
	<view>
		<view v-if="modelValue.show" class="yzm_body" @mousemove="touchmove" @mouseup="touchend">
			<view class="zhuti">
				<view
					:class="['msg', msgText==='验证成功' ? 'green' : (['安全验证', '验证中...'].indexOf(msgText)>-1 ? '' : 'red')]">
					{{msgText}}
				</view>
				<view class="title">拖动下方滑块完成拼图</view>
				<view class="movable-area">
					<view id="msg" v-if="zhutuPic === ''">{{msgLoadMsg}}</view>
					<view id="pic" v-else :style="{background: 'url(' + zhutuPic + ') no-repeat 100%/100%'}"></view>
					<view id="line"></view>
					<view :class="['movable-view', {doudong: futu_doudongClass}]"
						:style="{background: 'url(' + futuPic + ') no-repeat top left/100% 338rpx', left: futu_x+'px', transitionDuration: futu_x===10 ? '300ms' : '0ms'}"
						@touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" @mousedown="touchstart">
					</view>
				</view>
				<view class="close iconfont iconguanbi" @click="modelValue.show = false"></view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		emits: ['success'],
		props: {
			modelValue: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				zhutuPic: '', //主图
				//缺口图
				futuPic: '',
				futu_x: 10, //默认的位置
				futu_anxiaX: undefined, //按下时，手指的位置
				futu_doudongClass: false,
				//提示信息
				msgText: '安全验证',
				msgLoadMsg: '加载中',
				domain: '',
				id: 0,
			}
		},
		mounted() {

		}, //该组件被挂载到实例上去之后调用
		methods: {
			async shuaxin() {
				let _this = this;
				uni.request({
					url: _this.domain,
					data: {
						type: 'shengcheng',
					},
					success: (res) => {
						if (res.data.status === 1) { //生成验证码成功
							let id = res.data.data.data;
							// console.log(id)
							_this.id = id;
							_this.makePic('zhutu');
							_this.makePic('futu');
						}
					},
				});
			},

			async makePic(type) {
				let _this = this;
				let id = _this.id;
				uni.request({
					url: _this.domain,
					data: {
						id: id,
						type: type,
					},
					success: (res) => {
						// console.log(res)
						if (res.data.status === 1) { //生成验证码成功
							if (type == 'zhutu') {
								this.zhutuPic = this.$api.domain + res.data.data.data
							} else if (type == 'futu') {
								this.futuPic = this.$api.domain + res.data.data.data
							}

						}
					},
				});
			},

			touchstart(event) { //手指按下
				if (this.futu_anxiaX === undefined && this.futu_x === this.$options.data().futu_x) {
					this.futu_anxiaX = this.$isPc ? event.clientX : event.touches[0].clientX;
				}
			},
			touchmove(event) { //手指移动
				if (this.futu_anxiaX !== undefined) {
					var x = this.$options.data().futu_x + ((this.$isPc ? event.clientX : event.touches[0].clientX) - this
							.futu_anxiaX),
						[min, max] = [0, parseInt((600 - 79) / 2)] //确保不会超出边界【600是父元素的宽度、79是自身元素的宽度】
					this.futu_x = x < min ? min : (x > max ? max : x)
				}
			},
			touchend(event) { //手指离开
				let _this = this;
				if (this.futu_anxiaX !== undefined) {
					this.futu_anxiaX = undefined
					if (this.zhutuPic === '') {
						this.futu_x = this.$options.data().futu_x
					} else {
						this.msgText = '验证中...'
						uni.request({
							url: _this.domain,
							data: {
								type: 'yanzheng',
								id: _this.id,
								x: parseInt(this.futu_x * (679 / parseInt(600 /
									2))) //因为x是相对于movable-area容器宽度的，所以需要算出图片实际宽度相 对于 容器宽度的比例
							},
							success: (res) => {
								this.msgText = res.data.msg
								if (res.data.status === 1) {
									// this.$emit('success')
									setTimeout(() => {
										this.modelValue.show = false
										let code_type = uni.getStorageSync('code_type');
										if (code_type == 'register') {
											uni.$emit('register_code_success')
										} else if (code_type == 'login') {
											uni.$emit('login_code_success')
										}

									}, 1000);
								} else {
									//启动抖动动画
									this.futu_doudongClass = true //执行抖动的css动画
									//等待抖动结束
									setTimeout(() => {
										//停止抖动
										this.futu_doudongClass = false
										//回到默认的位置
										this.futu_x = this.$options.data().futu_x
										//重载
										// if (errMsg.code === 2) {
										// 	if (typeof(res.data.error_cishu) === 'undefined' || res
										// 		.data.error_cishu === 0) { //等于空意味着滑块验证码不存在，也是需要刷新的
										// 		this.shuaxin()
										// 	}
										// }
									}, 700);
									//恢复原状
									setTimeout(() => {
										this.msgText = '安全验证'
									}, 3500);
								}
							},
						});
					}
				}
			}
		},

		watch: {
			'modelValue.show'(newValue) {
				let _this = this
				if (newValue === false) {
					//设置为初始值
					Object.assign(this, this.$options.data());
				} else {
					this.domain = this.$api.domain + 'api/sliceCodeInfo'
					this.shuaxin()
				}
			}
		}
	}
</script>
<style lang="scss">
	@import 'icon.css';

	/*图标样式，使用ttf。不要设置字体大小*/
	.yzm_body {
		display: flex;
		background: rgba(0, 0, 0, 0.3);
		position: fixed;
		top: 0;
		z-index: 1001;
		width: 750rpx;
		height: 100vh;
		justify-content: center;
		align-items: center;

		.zhuti {
			position: relative;
			flex-direction: column;
			background: #FFF;
			width: 600rpx;
			padding: 20rpx 25rpx 30rpx 25rpx;
			border-radius: 15rpx;

			.msg {
				color: #999;
				font-size: 24rpx;

				&.red {
					color: red;
				}

				&.green {
					color: green;
				}
			}

			.close {
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				color: #A6A6A6;
				font-size: 36rpx;
				padding: 10rpx;
			}

			.title {
				font-size: 28rpx;
				line-height: 38rpx;
				color: #333;
				margin: 0 0 7rpx 0;
			}

			.movable-area {
				position: relative;
				width: 100%;
				height: 415rpx;
				flex-direction: column;

				#msg {
					width: 100%;
					line-height: 338rpx;
					justify-content: center;
					font-size: 30rpx;
					color: #999;
					background: #F8F8F8;
				}

				#pic {
					width: 600rpx;
					height: 338rpx;
				}

				#line {
					background: #e4e4e4;
					height: 20rpx;
					margin: 42rpx 0 15rpx 0;
					border-radius: 50rpx;
				}

				.movable-view {
					position: absolute;
					top: 0;
					left: 0;
					width: 79.63rpx;
					height: 100%;

					&:after {
						position: absolute;
						bottom: 0;
						left: 0;
						content: '';
						box-shadow: rgba(26, 101, 255, 0.52) 0 0 10rpx 1rpx;
						width: 100rpx;
						height: 50rpx;
						border-radius: 50rpx;
						background: rgb(26, 101, 255) url() no-repeat 50% 50%/auto 20rpx;
						margin-left: -10rpx;
					}

					@keyframes doudong {
						20% {
							transform: translateX(-15px);
						}

						40% {
							transform: translateX(15px);
						}

						60% {
							transform: translateX(-15px);
						}

						80% {
							transform: translateX(15px);
						}

						100% {
							transform: translateX(0);
						}
					}

					&.doudong {
						animation: doudong 500ms linear 1;
					}
				}
			}
		}
	}
</style>